<template>
  <transition name="vb-transistion">
    <div
      class="vb-dialog-wrapper"
      style="z-index: 2001"
      v-if="visible"
      @click.self="handleClose"
    >
      <div class="vb-dialog" :style="{ width: width, 'margin-top': top }">
        <div class="vb-header">
          <slot name="title">
          </slot>

          <button class="vb-dialog-closebtn" @click="handleClose">
            <i class="vb-icon-close vb-dialog-close"></i>
          </button>
        </div>
        <div class="vb-dialog-body">
          <slot name="content"></slot>
        </div>
        <!-- $slots.footer有些dialog不存在按钮，则不渲染，不占位置 -->
        <div class="vb-dialog-footer" v-if="$slots.footer">
          <span class="dialog-footer">
            <slot name="footer"></slot>
          </span>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import Button from "./Button.vue";
export default {
  components: { Button },
  name: "vbDialog",
  props: {
    width: {
      type: String,
      default: "50%",
    },
    top: {
      type: String,
      default: "15vh",
    },
    visible:{
      type: Boolean,
      default: false,
    }
    
  },
  methods: {
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/Dialog.scss";

//对弹出来的时候进行动画处理
.vb-transistion-enter-active {
  animation: vb-transistion-in 0.3s;
}
//dialog消失的动画是弹出的反向即可
.vb-transistion-leave-active {
  animation: vb-transistion-in 0.3s reverse;
}
//在开始时向Y轴移动-5%，完成时原本所在的位置。
@keyframes vb-transistion-in {
  0% {
    transform: translateY(-5%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>